<template>
    <div>
        <div class="search-wrapped">
            <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
                <el-form-item label="部门名称:">
                    <el-input v-model="searchFrom.name" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <span>结束时间:</span>
                    <el-date-picker v-model="searchFrom.end" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <template>
                        <el-button type="primary" size="mini" @click="onSubmit(); clearSearchFrom()"><i
                                class="el-icon-search"></i>查询</el-button>
                        <el-button type="primary" size="mini" @click="dialogVisible = true"><i
                                class="el-icon-circle-plus"></i>添加</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" type="index" :index="index" width="140">
            </el-table-column>
            <el-table-column prop="name" label="部门名称" width="180">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180">
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <template slot="empty">
                <el-empty description="没有数据"></el-empty>
            </template>
        </el-table>
        <div class="block">
            <el-pagination background @current-change="handleCurrentChange" :current-page.sync="searchFrom.currentPage"
                :page-size="searchFrom.pageSize" layout="total, prev, pager,jumper, next" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="添加部门" :visible.sync="dialogVisible" width="30%">
            <div class="dialog-wrapped">
                <el-form>
                    <el-form-item label="部门名称:">
                        <el-input v-model="deptName" placeholder="请输入部门名称"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addDept()">确 定</el-button>
                </span>
            </div>
        </el-dialog>
        <el-dialog title="编辑部门" :visible.sync="editDeptFlag" width="30%">
            <div class="dialog-wrapped">
                <el-form>
                    <el-form-item label="部门名称:">
                        <el-input v-model="deptName" placeholder="请输入部门名称"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editDeptFlag = false">取 消</el-button>
                    <el-button type="primary" @click="editDept()">确 定</el-button>
                </span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { GetAllDeptServer, DeleteDeptServer, AddDeptServer, EditDeptServer } from '@/api/dept'
import DialogDept from '@/components/DialogDept.vue';
export default {
    mounted() {
        this.getAllDept(this.searchFrom)
    },
    data() {
        return {
            tableData: [],
            searchFrom: {
                pageSize: 6,
                currentPage: 1,
                name: '',
                begin: '',
                end: '',
            },
            total: 0,
            index: 1,
            dialogVisible: false,
            editDeptFlag: false,
            deptName: '',
            id: '',
        }
    },
    comments: {
        DialogDept,
    },
    methods: {
        handleCurrentChange(val) {
            this.searchFrom.currentPage = val
            this.getAllDept(this.searchFrom)
        },
        //清空表单数据
        clearSearchFrom() {
            this.searchFrom = {
                name: '',
                begin: '',
                end: '',
                pageSize: 6,
                currentPage: 1
            }
        },
        onSubmit() {
            this.getAllDept()
        },
        handleEdit(row) {
            this.deptName = row.name
            this.id = row.id
            this.editDeptFlag = true
        },
        async editDept() {
            let res = await EditDeptServer(this.deptName, this.id)
            if (res.code == 1) {
                this.getAllDept()
                this.editDeptFlag = false
                this.$message({
                    showClose: true,
                    type: "success",
                    message: "编辑部门成功"
                })
            }
        },
        async handleDelete(row) {
            this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await DeleteDeptServer({ 'id': row.id })
                if (res.code == 1) {
                    this.getAllDept()
                    this.$message({
                        showClose: true,
                        type: "success",
                        message: "删除部门成功"
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        async addDept() {
            let res = await AddDeptServer(this.deptName)
            if (res.code == 1) {
                this.$message({
                    showClose: true,
                    type: "success",
                    message: "添加部门成功"
                })
                this.getAllDept()
            }
            this.dialogVisible = false
        },
        async getAllDept() {
            let res = await GetAllDeptServer(this.searchFrom)
            if (res.code == 1) {
                console.log(res)
                this.tableData = res.data.records
                this.total = res.data.total
                this.$message({
                    showClose: true,
                    type: "success",
                    message: "获取数据成功"
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.dialog-wrapped {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.block {
    display: flex;
    flex-direction: row-reverse;
}

:deep(.cell) {
    text-align: center;
}

:deep(.el-table th) {
    text-align: center;
}
</style>